<template>
  <div class="container">
    <Header
      v-bind:isBack="isBack"
      v-bind:title="title"
      :isSongSheet="isSongSheet"
      :sheetStatus="sheetStatus"
      :coverImgUrl="coverImgUrl"
    ></Header>
    <div class="tip">
      <img :src="songSheetObj.music_list_photo||baseImg" alt class="background" />
      <div class="top">
        <div class="left">
          <!-- <img :src="songSheetObj.song_sheet_photo" alt /> -->
          <img :src="songSheetObj.music_list_photo" alt />
        </div>
        <div class="right">
          <div class="title fs-38">{{songSheetObj.music_list_name}}</div>
          <div class="singers areatop" @click="checkSinger()">
            <span class="txt fs-28 more">歌手:&nbsp;{{songSheetObj.singer_artistic_name}}</span>
          </div>
          <div class="time">
            <span class="fs-24">发行时间：{{songSheetObj.issue_date}}</span>
          </div>
          <div class="song fs-24 areatop">
            <span class="more" @click="showModel">专辑详情</span>
          </div>
        </div>
      </div>
      <div class="icons space-between">
        <div class="item" @click="toComment">
          <img :src="chat" alt class="icon" />
          <span class="text fs-26">{{songSheetObj.comments_num}}</span>
        </div>
        <div class="item">
          <img :src="share" alt class="icon" @click="toShare" />
          <span class="text fs-26">{{songSheetObj.share_num}}</span>
        </div>
        <div class="item">
          <img :src="collect" v-show="!isCollect" alt class="icon" @click="openCollectModel" />
          <img :src="collected" v-show="isCollect" alt class="icon" @click="openCollectModel" />
          <span class="text fs-26" v-show="!isCollect">收藏</span>
          <span class="text fs-26" v-show="isCollect">已收藏</span>
        </div>
        <div class="item">
          <img :src="downLoad" alt class="icon" />
          <span class="text fs-26">下载</span>
        </div>
      </div>
    </div>
    <!-- 歌曲列表部分 -->
    <div class="song-list">
      <div class="title space-between">
        <div class="left space-between">
          <span class="icon">
            <img :src="playAll" alt />
          </span>
          <span class="tit fs-36">全部播放</span>
          <span class="num fs-26">共({{songSheetObj.music_num}})首</span>
        </div>
        <div class="right space-between">
          <span class="icon">
            <img :src="operate" alt />
          </span>
          <span class="txt fs-28" @click="toOperation">批量操作</span>
        </div>
      </div>
      <div
        class="list space-between"
        v-for="item in songList"
        :key="item.id"
        @click="toSonDetail(item)"
      >
        <div class="left">
          <span class="song-name fs-36">{{item.music_name}}</span>
          <span class="mes">
            <img v-show="item.isDownLoad" :src="selected" alt />
            <img v-show="item.royalty != 0 && item.royalty != '0.00'" :src="exclusive" alt />
            <img v-show="item.royalty != 0 && item.royalty != '0.00'" :src="payment" alt />
            <span class="txt fs-26">{{item.singer_name}}-{{item.music_list_name}}</span>
          </span>
        </div>
        <div class="right space-between">
          <span class="operate">
            <img v-show="item.video_url" :src="video" alt />
          </span>
          <span class="more" @click.stop="toShowModel(item)">
            <img :src="moreMes" alt />
          </span>
        </div>
      </div>
    </div>
    <div class="model" v-show="isShow">
      <img :src="sheetMes.music_list_photo||baseImg" alt class="background" />
      <div class="header space-between">
        <span class="title fs-36">歌单</span>
        <img :src="closeSheet" @click="closeModel" alt />
      </div>
      <img class="sheet-photo" :src="sheetMes.music_list_photo" alt />
      <div class="tit fs-38">{{sheetMes.music_list_name}}</div>
      <div class="main">
        <p class="tips fs-32">标签：{{sheetMes.music_list_category_name}}</p>
        <p class="mes fs-32">简介：{{sheetMes.music_list_content}}</p>
      </div>
    </div>
    <!-- <player :isFull="store.isFullPlay"></player> -->
    <songMore :showSongMore="showSongMore" :musicObject="musicObject" @fn="getSongMoreStatus"></songMore>
    <shareModel v-show="leaderModal" @fn="getShareModel" :leaderModal="leaderModal"></shareModel>
  </div>
</template>

<script>
import { MessageBox } from "mint-ui";
export default {
  name: "album-detail",
  data() {
    return {
      coverImgUrl: "",
      store: this.getStore(),
      title: "专辑",
      isBack: true,
      isSongSheet: true,
      sheetStatus: 3, //1表示歌单  2 表示歌手   3表示排行榜
      songSheetObj: {},
      showSongMore: false, //展示歌曲更多模态框
      musicObject: {}, //音乐信息
      sheetMes: {},
      chat: require("@/assets/index/chat.png"),
      share: require("@/assets/index/share.png"),
      collect: require("@/assets/index/collect.png"),
      collected: require("@/assets/index/red-heart.png"),
      downLoad: require("@/assets/index/downLoad.png"),
      playAll: require("@/assets/index/playAll.png"),
      operate: require("@/assets/index/operate.png"),
      video: require("@/assets/index/video.png"),
      selected: require("@/assets/index/selected.png"),
      headerPic: require("@/assets/image/headerPic.png"),
      moreMes: require("@/assets/index/moreMes.png"),
      testPic: require("@/assets/image/songList.png"),
      baseImg: require("@/assets/account/singerbg.png"),
      closeSheet: require("@/assets/index/closeSheet.png"),
      exclusive: require("@/assets/index/exclusive.png"),
      payment: require("@/assets/index/payment.png"),
      songList: [],
      music_list_id: 1, //专辑id
      music_from: 2, //2  表示是专辑中的歌曲
      isShow: false,
      playingList: [], //当前播放歌曲所在的播放列表
      collectMessage: "确定收藏专辑?",
      isCollect: false,
      leaderModal: false //控制微信内分享模态框
    };
  },
  watch: {
    playingList(val) {
      // console.log(val,'---val---playingList---album');
      // console.log(this.playingList,'---this.playingList---album');
    }
  },
  components: {},
  methods: {
    // 选择歌手 去歌手主页
    checkSinger() {
      this.$router.push({
        path: "/singerhome",
        query: { user_id: this.songSheetObj.user_id }
      });
    },
    // 获取分享模态框传过来的status
    getShareModel(e) {
      this.leaderModal = e;
    },
    // 去分享
    toShare() {
      this.shareObject = {
        title: "分享专辑",
        desc: this.songSheetObj.music_list_name,
        img: this.songSheetObj.music_list_photo
      };
      console.log(this.shareObject, "---this.shareObject");
      this.is_weixn();
      // 记录进入app时的url
      if (typeof window.entryUrl === "undefined" || window.entryUrl === "") {
        window.entryUrl = location.href.split("#")[0];
      }
      if (this.isapp == 0) {
        this.wxshare.getWxmessage(
          this.shareObject.title,
          this.shareObject.desc,
          /(Android)/i.test(navigator.userAgent)
            ? location.href.split("#")[0]
            : window.entryUrl,
          this.shareObject.img,
          location.href
        );
      } else if (this.isapp == 1) {
        var sendData = {
          type: "1",
          data: {
            title: this.shareObject.title,
            description: this.shareObject.desc,
            shareimg: this.shareObject.img,
            share_url: location.href
          }
        };
        window.postMessage(JSON.stringify(sendData));
      }
    },
    // 判断是否在微信中打开
    is_weixn() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        // 表示在微信里面
        this.leaderModal = true;
        return true;
      } else {
        return false;
      }
    },
    // 获取歌曲更多模态框的状态
    getSongMoreStatus(e) {
      this.showSongMore = e;
    },
    // 展开歌曲更多模态框
    toShowModel(item) {
      this.musicObject = item;
      this.showSongMore = true;
    },
    // 批量操作
    toOperation() {
      this.$router.push({
        path: "/index/batch-operation",
        query: { list: this.songList }
      });
    },
    // 去歌曲评论页面  status == 2 表示当前是专辑
    toComment() {
      this.$router.push({
        path: "/index/comment",
        query: { status: 2, id: this.music_list_id }
      });
    },
    // 打开专辑简介模态框
    showModel() {
      this.isShow = true;
    },
    // 关闭模态框
    closeModel() {
      this.isShow = false;
    },
    // 去歌曲播放页面
    toSonDetail(item) {
      this.store.setData(item.music_id, this.music_from);
      this.getAlbumPlayingList(item.music_id, this.music_from);
    },
    // 获取专辑的播放列表数据
    getAlbumPlayingList(music_id, music_from) {
      const url =
        this.$host1 +
        `home/musicMainMsg?music_id=` +
        music_id +
        `&music_from=` +
        this.music_from;
      this.$axios
        .get(url)
        .then(res => {
          if (res.data.code == 200) {
            this.playingList = res.data.data.list;
            this.store.playingList = this.playingList;
            //  console.log(JSON.stringify(this.playingList))
            window.localStorage.setItem(
              "playingList",
              JSON.stringify(this.playingList)
            );
            console.log(res.data.data, "---res.data.data--获取专辑的播放列表");
            this.store.isPlay = true;
            this.store.isFullPlay = true;
            // console.log(JSON.parse(window.localStorage.getItem("playingList")),'----JSON.parse(window.localStorage.getItem("playingList"));');
            //  console.log(this.playingList,'----this.playingLis----albumdetail')
          } else if (res.data.code == 0) {
            this.AlertWin(res.data.data.message);
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取专辑下的列表的数据 以及头部卡片信息数据
    getAlbumList() {
      const url =
        this.$host1 +
        `home/toGetMusicListMsg?music_list_id=` +
        this.music_list_id;
      this.$axios
        .get(url)
        .then(res => {
          console.log(res);
          //return
          if (res.data.code == 200) {
            this.songSheetObj = {
              comments_num: res.data.data.total.comments_num,
              issue_date: res.data.data.total.issue_date,
              music_list_content: res.data.data.total.music_list_content,
              music_list_name: res.data.data.total.music_list_name,
              music_list_photo: res.data.data.total.music_list_photo,
              share_num: res.data.data.total.share_num,
              music_num: res.data.data.music_num,
              singer_artistic_name: res.data.data.total.singer_artistic_name,
              user_id: res.data.data.total.singer_id
            };
            this.coverImgUrl = res.data.data.total.music_list_photo;
            this.songList = res.data.data.list;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取专辑简介信息
    toGetMusicListMainMsg() {
      const url =
        this.$host1 +
        `home/toGetMusicListMainMsg?music_list_id=` +
        this.music_list_id;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data.data, "---res.data.data--");
          if (res.data.code == 200) {
            this.sheetMes = res.data.data[0];
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 打开收藏歌单模态框
    openCollectModel() {
      if (this.isCollect) {
        this.collectMessage = "确定取消收藏此专辑?";
      } else {
        this.collectMessage = "确定收藏专辑?";
      }
      MessageBox({
        title: "",
        message: this.collectMessage,
        showCancelButton: true
      })
        .then(action => {
          if (action == "confirm") {
            this.collectAlbum();
          }
        })
        .catch(error => {
          if (error == "cancel") {
            console.log("点击取消");
          }
        });
    },
    // 判断  歌单  专辑 排行榜是否被收藏
    judgeCollect() {
      const url = this.$host1 + `home/IsCollect`;
      var params = {
        mix_id: this.music_list_id,
        type: 3
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 0) {
            // 表示当前未被收藏
            this.isCollect = false;
            this.collectMessage = "确定收藏此专辑?";
          } else if (res.data.code == 1) {
            this.isCollect = true;
            this.collectMessage = "确定取消收藏此专辑?";
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 收藏专辑
    collectAlbum() {
      const url = this.$host1 + `home/toCollectMusicList`;
      var params = {
        music_list_id: this.music_list_id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          if (res.data.code == 200) {
            this.isCollect = !this.isCollect;
            this.AlertWin(res.data.data.message);
          } else {
            this.AlertWin(res.data.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    }
  },
  created() {
    this.music_list_id = this.$route.query.id;
    this.judgeCollect(); //判断当前专辑是否被收藏
    this.getAlbumList();
    this.toGetMusicListMainMsg();
    this.playingList = JSON.parse(window.localStorage.getItem("playingList"));
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  .tip {
    width: 100%;
    position: relative;
    // background: linear-gradient(to right, #5e02a9, #8c11c2);
    .background {
      width: 100%;
      height: 100%;
      z-index: -1;
      // margin-left: -1rem;
      // margin-top: -1rem;
      left: 0;
      top: 0;
      position: absolute;
      filter: blur(0.7rem);
    }
    .top {
      width: 100%;
      padding: 1.72rem 0.38rem 0 0.23rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      margin-bottom: 0.52rem;
      .left {
        width: 2rem;
        height: 2rem;
        margin-right: 0.24rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        display: flex;
        max-width: 65%;
        flex-direction: column;
        .title {
          font-weight: 800;
          color: rgba(255, 255, 255, 1);
          line-height: 0.48rem;
          margin-bottom: 0.1rem;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
        .singers {
          display: table-cell;
          vertical-align: middle;
          margin-bottom: 0.1rem;
          .txt {
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            line-height: 0.32rem;
            opacity: 0.6;
          }
        }
        .time {
          margin-bottom: 0.1rem;
        }
        .areatop {
          height: 0.6rem;
        }
        .areatop .more::after {
          border-color: #fff;
          right: 3.5rem;
          margin-top: 0.1rem;
        }
        .areatop:nth-child(2) {
          .more::after {
            right: 2.3rem;
          }
        }
        .song,
        .time {
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: 0.32rem;
          opacity: 0.6;
          &.areatop .more::after {
            // right: 1rem;
            // margin-top: 0;
          }
        }
      }
    }
    // 头部icon的样式
    .icons {
      padding: 0 0.66rem 0 0.6rem;
      height: 1.3rem;
      // background: linear-gradient(to right, #c0a0a3, #8f6980);
      .item {
        text-align: center;
        img {
          display: block;
          margin: 0 auto;
          width: 0.48rem;
          height: 0.45rem;
          margin-bottom: 0.14rem;
        }
        .text {
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: 0.32rem;
        }
      }
    }
    .rankBgc {
      background: linear-gradient(to right, #5e02a9, #8c11c2);
    }
    .singerBgc {
      background: linear-gradient(to right, #a0c0c7, #b19194, #9ab5bb);
    }
  }
  // 歌曲列表部分的样式
  .song-list {
    padding: 0.46rem 0.27rem 1.5rem;
    background-color: #fff;
    box-sizing: border-box;
    .title {
      margin-bottom: 0.2rem;
      .left {
        .icon {
          width: 0.38rem;
          height: 0.38rem;
          margin-right: 0.16rem;
          img {
            width: 100%;
          }
        }
        .tit {
          font-weight: bold;
          color: rgba(68, 68, 68, 1);
          line-height: 0.36rem;
          margin-right: 0.32rem;
        }
        .num {
          font-weight: 500;
          color: rgba(153, 153, 153, 1);
          // line-height:36px;
        }
      }
      .right {
        .icon {
          width: 0.28rem;
          height: 0.3rem;
          margin-right: 0.15rem;
          img {
            width: 100%;
          }
        }
        .txt {
          font-weight: 800;
          color: rgba(68, 68, 68, 1);
          line-height: 0.36rem;
        }
      }
    }
    .list {
      display: flex;
      flex-direction: row;
      padding: 0.41rem 0 0.38rem;
      box-sizing: border-box;
      border-bottom: 0.01rem solid #e9e9e9;
      .left {
        display: flex;
        flex-direction: column;
        .song-name {
          font-weight: 500;
          color: rgba(68, 68, 68, 1);
          line-height: 0.36rem;
          margin-bottom: 0.22rem;
        }
        .mes {
          display: flex;
          align-items: center;
          img {
            width: 0.5rem;
            height: 0.24rem;
            vertical-align: middle;
            display: inline-block;
            margin-right: 0.11rem;
          }
          img:nth-child(1) {
            // width: 0.3rem;
            // height: 0.3rem;
          }
          .txt {
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
            line-height: 0.36rem;
          }
        }
      }
      .right {
        .operate {
          width: 0.35rem;
          height: 0.37rem;
          margin-right: 0.44rem;
          img {
            width: 100%;
          }
        }
        .more {
          width: 0.08rem;
          height: 0.36rem;
          img {
            width: 100%;
          }
        }
      }
    }
  }

  .model {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    width: 100%;
    height: 100vh;
    // background: linear-gradient(to right, #c0a0a3, #8f6980);
    .background {
      width: 100%;
      height: 100%;
      z-index: -1;
      // margin-left: -1rem;
      // margin-top: -1rem;
      left: 0;
      top: 0;
      position: absolute;
      filter: blur(0.2rem);
    }
    .header {
      margin-top: 0.35rem;
      padding: 0 0.33rem 0 3.39rem;
      box-sizing: border-box;
      .title {
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        line-height: 0.32rem;
      }
      img {
        width: 0.37rem;
        height: 0.37rem;
      }
    }
    .sheet-photo {
      margin: 2.04rem auto 0.56rem;
      width: 3.44rem;
      height: 3.44rem;
    }
    .tit {
      text-align: center;
      margin-bottom: 0.8rem;
      font-weight: 800;
      color: rgba(255, 255, 255, 1);
      line-height: 0.56rem;
    }
    .main {
      padding: 0 0.45rem 0 0.35rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      // line-height:0.32rem;
      .tips {
        margin-bottom: 0.38rem;
      }
      .mes {
        line-height: 0.56rem;
      }
    }
  }
}
</style>
